<template>
  <div id="passenger-detail">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/customers">企业客户</router-link>
        </li>
        <li class="breadcrumb-item">
          <router-link to="/passengers">员工信息</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template v-if="psgInfo !== null">
      <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link active"
            id="basic-tab"
            data-bs-toggle="tab"
            href="#basicTab"
            role="tab"
            >基础信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="id-tab"
            data-bs-toggle="tab"
            href="#idTab"
            role="tab"
            >证件信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ffp-tab"
            data-bs-toggle="tab"
            href="#ffpTab"
            role="tab"
            >常旅客信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="policy-tab"
            data-bs-toggle="tab"
            href="#policyTab"
            role="tab"
            >机票政策({{ psgInfo.flightPolicies.length }})</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="ot-tab"
            data-bs-toggle="tab"
            href="#otTab"
            role="tab"
            >其它信息</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            id="login-tab"
            data-bs-toggle="tab"
            href="#loginTab"
            role="tab"
            >登录信息</a
          >
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="basicTab" role="tabpanel">
          <div class="card">
            <div class="card-header">
              基础信息
              <router-link
                class="btn btn-success"
                :to="`/passenger?id=` + psgInfo.id"
                >修改</router-link
              >
            </div>
            <table class="table table-striped table-sm">
              <tbody>
                <tr>
                  <td class="text-end text-info">中文名</td>
                  <td>
                    {{ psgInfo.nameCn }}
                    <span class="text-danger" v-if="psgInfo.vipLevel > 0"
                      >VIP-{{ psgInfo.vipLevel }}</span
                    >
                  </td>
                </tr>
                <tr>
                  <td class="text-end text-info">英文名</td>
                  <td>{{ psgInfo.nameEn }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">firstName</td>
                  <td>{{ psgInfo.firstName }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">lastName</td>
                  <td>{{ psgInfo.lastName }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">性别</td>
                  <td>{{ getGenderDesc(psgInfo.gender) }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">公司</td>
                  <td>
                    {{ showCustomerName(psgInfo) }}
                  </td>
                </tr>
                <tr>
                  <td class="text-end text-info">部门</td>
                  <td>
                    <template v-if="psgInfo.department !== null">
                      {{ psgInfo.department.name }}
                    </template>
                  </td>
                </tr>
                <tr>
                  <td class="text-end text-info">职位</td>
                  <td>
                    <template v-if="psgInfo.position !== null">
                      {{ psgInfo.position.name }}
                    </template>
                  </td>
                </tr>
                <tr>
                  <td class="text-end text-info">手机</td>
                  <td>{{ psgInfo.mobile }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">电话</td>
                  <td>{{ psgInfo.phone }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">电子邮件</td>
                  <td>{{ psgInfo.email }}</td>
                </tr>
                <tr>
                  <td class="text-end text-info">生日</td>
                  <td>{{ psgInfo.birthday }}</td>
                </tr>
              </tbody>
            </table>
            <div class="card-footer">
              <button
                class="btn btn-danger float-end"
                @click.stop="deletePsg(psgInfo.id)"
                v-if="isAdmin"
              >
                删除
              </button>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="idTab" role="tabpanel">
          <div class="card">
            <div class="card-header">证件信息</div>
            <div class="card-body" v-for="(info, index) in psgInfo.idInfos">
              <div class="row">
                <label class="control-label col-3 text-end"> 证件类型 </label>
                <div class="col-6">
                  <select
                    class="form-control input-group-addon"
                    v-model.number="info.idType"
                    disabled
                  >
                    <option
                      :value="idTypeInfo.idType"
                      v-for="idTypeInfo of idTypes"
                    >
                      {{ idTypeInfo.idName }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="row">
                <label class="control-label col-3 text-end"> 证件号 </label>
                <div class="col-6">
                  {{ info.idNo }}
                </div>
              </div>

              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-3 text-end">
                  签发国家/地区
                </label>
                <div class="col-6">
                  {{ info.idIssueNation }}
                </div>
              </div>
              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-3 text-end"> 有效期 </label>
                <div class="col-6">
                  {{ info.idValidDate }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="ffpTab" role="tabpanel">
          <div class="card">
            <div class="card-header">常旅客信息</div>
            <div class="card-body" v-for="(info, index) in psgInfo.ffpNos">
              <div class="row">
                <label class="control-label col-3 text-end"> 航司 </label>
                <div class="col-6">
                  {{ info.carrier }}
                </div>
              </div>
              <div class="row">
                <label class="control-label col-3 text-end"> 常旅客卡号 </label>
                <div class="col-6">
                  {{ info.ffpNo }}
                </div>
              </div>
              <div class="row" v-if="info.idType !== 1">
                <label class="control-label col-3 text-end"> 卡类型 </label>
                <div class="col-6">
                  {{ info.ffpType }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="policyTab" role="tabpanel">
          <div class="card">
            <div class="card-header">机票政策</div>
            <table class="table table-striped table-sm">
              <thead>
                <tr>
                  <th class="text-center">ID</th>
                  <th class="text-center">政策编号</th>
                  <th class="text-center">航司</th>
                  <th class="text-center">舱位列表</th>
                  <th class="text-center">大客户代码</th>
                  <th class="text-center">白名单</th>
                  <th class="text-center">外部备注</th>
                  <th class="text-center">内部备注</th>
                  <th class="text-center bg-success">生效日期</th>
                  <th class="text-center bg-warning">失效日期</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(info, index) in psgInfo.flightPolicies"
                  :key="index"
                >
                  <td class="text-center">{{ info.id }}</td>
                  <td class="text-center">{{ info.policyCode }}</td>
                  <td class="text-center">{{ info.carrier }}</td>
                  <td class="text-center">{{ info.subclasses }}</td>
                  <td class="text-center">{{ info.keyCustomerCode }}</td>
                  <td class="text-center">
                    <span v-if="info.whiteList === 0">不需要</span>
                    <span v-else-if="info.whiteList === 1">需要</span>
                    <span v-else>?</span>
                  </td>
                  <td class="text-center">{{ info.publicMemo }}</td>
                  <td class="text-center">{{ info.privateMemo }}</td>
                  <td class="text-center">{{ info.effectDate }}</td>
                  <td class="text-center">{{ info.expireDate }}</td>

                  <td>
                    <a
                      href="javascript:void(0)"
                      @click.stop="removePolicy(info.id)"
                      >移除</a
                    >
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="otTab" role="tabpanel">
          <div class="card">
            <div class="card-header">其它信息</div>
            <table class="table table-striped table-sm small">
              <tr>
                <td class="text-end text-info">常旅客卡号</td>
                <td>{{ psgInfo.ffpNo }}</td>
              </tr>
              <tr>
                <td class="text-end text-info">飞机等级</td>
                <td>{{ psgInfo.flightLevel }}</td>
              </tr>
              <tr>
                <td class="text-end text-info">火车等级</td>
                <td>{{ psgInfo.trainLevel }}</td>
              </tr>
              <tr>
                <td class="text-end text-info">喜好</td>
                <td>{{ psgInfo.hobby }}</td>
              </tr>
              <tr>
                <td class="text-end text-info">备注</td>
                <td>{{ psgInfo.remark }}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="tab-pane fade" id="loginTab" role="tabpanel">
          <div class="card">
            <div class="card-header">会员信息</div>
            <div class="card-body" v-if="loginInfoCount === 0">
              <button
                class="btn btn-primary btn-sm"
                @click.stop="generateLoginInfo()"
              >
                生成会员信息
              </button>
            </div>
            <customer-login-info
              :customerId="customerId"
              :passengerId="id"
              :count.sync="loginInfoCount"
            ></customer-login-info>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { showCustomerName } from "@/common/common.js";
import {
  searchPassengerById,
  createPsg,
  deletePsgById,
  generateLoginInfoByPsgId,
  deletePsgPolicy,
} from "@/api/user.js";
import {
  searchDepartmentsByCustomerId,
  searchCustomers,
} from "@/api/customer.js";
import $ from "jquery";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import CustomerLoginInfo from "./customer/customer-login-info.vue";

export default {
  components: {
    MyPagination,
    MyDatePicker,
    CustomerLoginInfo,
  },
  data() {
    return {
      id: 0,
      customerId: 0,

      loginInfoCount: 0,

      // dataList: [],
      // customers: [],
      // departments: [],

      // sc: {
      //   rowCount: 0,
      //   pageNo: 1,
      //   pageSize: 20,
      //   pageTotal: 0
      // },
      // searchName: '',

      psgInfo: null,
    };
  },
  computed: {
    idTypes() {
      return this.$store.state.idTypes;
    },
    isAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  watch: {
    loginInfoCount: function (newVal) {
      console.log(newVal);
    },
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    // console.log(this.id)
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      searchPassengerById(this.id, (v) => {
        this.psgInfo = v;
        this.customerId = v.customer.id;
      });
    },
    getGenderDesc: function (val) {
      if (val === 1) {
        return "男";
      } else if (val === 2) {
        return "女";
      } else {
        return "";
      }
    },
    deletePsg: function () {
      const msg = "确定删除吗 ?";
      if (confirm(msg) == true) {
        // return true;
      } else {
        return;
      }

      deletePsgById(this.id, (v) => {
        if (v.status === "OK") {
          this.$router.push("/passengers");
        } else {
          this.showErrMsg(this.errmsg);
        }
      });
    },
    removePolicy: function (psgPolicyId) {
      deletePsgPolicy(this.id, psgPolicyId, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("移除成功");
          this.search();
        } else {
          this.showErrMsg(this.errmsg);
        }
      });
    },
    generateLoginInfo: function () {
      generateLoginInfoByPsgId(this.id, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("创建成功");
        } else {
          this.showErrMsg("操作失败: " + v.errMsg, "danger");
        }
      });
    },
    showCustomerName: function (info) {
      return showCustomerName(info);
    },
  },
};
</script>